import {Layout, Spin} from "antd";
import React, {Suspense} from "react";
import {Outlet, useLoaderData} from "react-router-dom";
import useMicro from "@/server";
import Menu from "./menu";
import "./index.less";

const {Sider, Content} = Layout;

const Home: React.FC = () => {
    const data: any = useLoaderData();
    useMicro({init: true});
    return (
        <Suspense fallback={<Spin style={{flex: 1}} />}>
            <Layout className="page-layout">
                <Sider className="sider-layout">
                    <Menu data={data} />
                </Sider>
                <Content className="content-layout">
                    <Outlet />
                </Content>
            </Layout>
        </Suspense>
    );
};

export default Home;
